<template>
  <el-dialog title="字段类型映射" :visible.sync="mappingModalShow" :width="modalWidth">
    <div class="mapping-body" ref="mappingbody">
      <DbType2JavaType v-for="(mapping,index) in mappingSettings" :key="index" :mapping="mapping"/>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="mappingModalShow = false">取 消</el-button>
      <el-button type="primary" @click="customeMapping">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import DbType2JavaType from "./DbType2JavaType";
  import {mapState} from "vuex";
  export default {
    name: "EditLinkModal",
    components: {DbType2JavaType},
    computed: {
      ...mapState(["modalWidth","mappingSettings"]),
      mappingModalShow: {
        get() {
          return this.$store.getters.mappingModalShow;
        },
        set(flag) {
          this.$store.dispatch("mappingModalShow", flag);
        }
      }
    }, methods: {
      customeMapping(){
        this.$store.dispatch("mappingModalShow", false);
        let children = this.$refs.mappingbody.getElementsByTagName("input");
        let mapping = {};
        for (let i = 0; i < children.length; i++) {
          let ele = children[i];
          let dbType = ele.getAttribute("name");
          mapping[dbType] = ele.value
        }
        this.$store.dispatch("customeMapping", mapping);
      }
    },mounted() {


    }
  }

</script>

<style scoped>
.mapping-body{
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
